---
title: "Accessibility Checker Rule Help: WCAG20_Area_HasAlt"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### `<area>` element in an image map has no text alternative

<div id="locLevel"></div>

`<area>` elements in an image map must have a text alternative

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

An image map is an image divided into selectable regions defined by `<area>` elements. When the selectable `<area>` elements contain important information, providing a text alternative for each `<area>` element makes the same information accessible through audio or other channels.

<div id="locSnippet"></div>

### What to do

Use an `alt` attribute on each `<area>` element to provide a short description that serves the same purpose as the `<area>` on the image map.

Example:

<CodeSnippet type="multi" light={true}>&lt;img src="welcome.gif" usemap="#map1" alt="Areas in the library. Select an area for more information on that area." /&gt;
&lt;map id="map1" name="map1"&gt;
&lt;area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference" /&gt;
&lt;area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab" /&gt;
&lt;/map&gt;</CodeSnippet>

Note: Example code includes material copied from or derived from [WCAG 2.1 technique H24](https://www.w3.org/TR/WCAG20-TECHS/H24) Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang).

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 1.1.1 Non-text content](https://www.ibm.com/able/requirements/requirements/#1_1_1)
[WCAG  2.1 HTML technique H24](https://www.w3.org/TR/WCAG20-TECHS/H24)

### Who does this affect?

* People using a screen reader, including blind, low vision and neurodivergent people
* People who turned off image-loading on their web browsers
* People using text-based browsers (e.g., Lynx) or audio interfaces

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
